<template>
  <div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有课程" name="first"></el-tab-pane>
      <el-tab-pane label="我的申请" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="tabName==='first'">
      <h1>所有课程</h1>
      <el-form :inline="true" style="margin-top: 20px"
               :model="searchForm" :rules="searchFormRules" ref="searchForm">
<!--        <el-form-item label="开课学期" prop="semester" >-->
<!--          <el-select v-model="searchForm.semester" placeholder="开课学期" style="width: 120px"-->
<!--                     clearable filterable>-->
<!--            <el-option-->
<!--                v-for="item in semesterData"-->
<!--                :key="item.id"-->
<!--                :label="item.season"-->
<!--                :value="item.id"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="上课时间" prop="time" >
          <el-select v-model="searchForm.time" multiple placeholder="请选择上课时间" clearable filterable>
            <el-option
                v-for="item in timeData"
                :key="item.id"
                :label="item.show"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程代码"prop="courseId" >
          <el-input v-model="searchForm.courseId" placeholder="课程代码"></el-input>
        </el-form-item>
        <el-form-item label="课程名称"prop="courseName" >
          <el-input v-model="searchForm.courseName" auto-complete="off" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="教师姓名" prop="teacherName" >
          <el-input v-model="searchForm.teacherName" auto-complete="off" placeholder="教师姓名" style="width:90px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitSearch('searchForm')">搜索</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
          ref="courseTable"
          :data="courseData"
          border
          stripe
          style="width: fit-content; margin-top: 10px">
        <el-table-column
            prop="id"
            label="课程序号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="semester"
            label="开课学期"
            width="78">
        </el-table-column>
        <el-table-column
            prop="courseId"
            label="课程编号"
            width="140">
        </el-table-column>
        <el-table-column
            prop="courseName"
            label="课程名称"
            width="100">
        </el-table-column>
        <el-table-column
            prop="type"
            label="课程类型"
            width="100">
        </el-table-column>
        <el-table-column
            prop="schoolName"
            label="授课院系"
            width="80">
        </el-table-column>
        <el-table-column
            prop="major"
            label="授课专业"
            width="80">
        </el-table-column>
        <el-table-column
            prop="credit"
            label="学分"
            width="50">
        </el-table-column>
        <el-table-column
            prop="hour"
            label="学时"
            width="50">
        </el-table-column>
        <el-table-column
            prop="time"
            label="上课时间"
            width="90">
        </el-table-column>
        <el-table-column
            prop="location"
            label="上课地点"
            width="80">
        </el-table-column>
        <el-table-column
            prop="teacher"
            label="授课教师"
            width="80">
        </el-table-column>
        <!--      <el-table-column-->
        <!--          prop="teacherId"-->
        <!--          label="授课教师工号"-->
        <!--          width="90">-->
        <!--      </el-table-column>-->
        <el-table-column
            v-if="false"
            prop="currentNum"
            label="已选人数"
            width=90>
        </el-table-column>
        <el-table-column
            v-if="false"
            prop="volume"
            label="课程容量"
            width=90>
        </el-table-column>
        <el-table-column
            prop="courseNum"
            label="已选人数/课程容量"
            width=90>
        </el-table-column>
        <el-table-column
            prop="intro"
            label="课程简介"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="courseApply(scope.row)" type="text" size="small">选课申请</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--选课申请-->
      <el-dialog title="选课申请" :visible.sync="applyVisible" @closed="resetApply('applyForm')" width="600px">
        <el-form :model="applyForm" :rules="applyRules" ref="applyForm">
          <el-form-item label="课程编号" prop="courseId" label-width="100px">
            <el-input v-model="applyForm.courseId" disabled></el-input>
          </el-form-item>
          <el-form-item label="课程名称" prop="courseName" label-width="100px">
            <el-input v-model="applyForm.courseName" disabled></el-input>
          </el-form-item>
          <el-form-item label="授课教师" prop="teacher" label-width="100px">
            <el-input v-model="applyForm.teacher"  disabled></el-input>
          </el-form-item>
          <el-form-item label="申请理由" prop="reason" label-width="100px">
            <el-input v-model="applyForm.reason" type="textarea" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetApply('applyForm')">取 消</el-button>
          <el-button type="primary" @click="submitApply('applyForm')">提 交</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-if="tabName==='second'">
      <el-table title="待审核选课申请"
                ref="applyTable"
                :data="applyData"
                border
                stripe
                style="width: fit-content; margin-left: 10px">
        <el-table-column
            prop="id"
            label="申请序号"
            width="60">
        </el-table-column>
        <el-table-column
            prop="stuName"
            label="学生姓名"
            width="80">
        </el-table-column>
        <el-table-column
            prop="stuId"
            label="学号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="courseId"
            label="课程代码"
            width="140">
        </el-table-column>
        <el-table-column
            prop="courseName"
            label="课程名称"
            width="140">
        </el-table-column>
        <el-table-column
            prop="teacherName"
            label="授课教师"
            width="100">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="申请理由"
            width=140>
        </el-table-column>
          <el-table-column
                  prop="statu"
                  label="申请状态"
                  width=140>
          </el-table-column>
        <el-table-column
            prop="rejectReason"
            label="驳回理由"
            width=140>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
    name: "StuCourseApply",
    data() {
      return {
        courseData: [],
        locationData: [],
        timeData: [],
        semesterData: [],

        searchForm:{
          location:'',
          time:[],
          courseId:'',
          courseName:'',
          teacherName:'',
        },
        searchFormRules:{
          location:[],
          time:[],
          courseId:[],
          courseName:[],
          teacherName:[],
        },

        applyData:[],
        applyForm:{},
        applyRules:{
          reason:[
            {required:true,message:"请输入申请理由",trigger:'blur'}
          ]
        },
        applyVisible: false,

        userInfo:{},
        courseStatus:'',

        //标签页相关
        activeName: 'first',//初始亮着的页面
        tabName: 'first',

      }
    },
    created(){
      // this.getUserInfo();
      this.getCourseStatus();
      this.getSemesterList();
      this.getTimeList();
      this.getCourseList();
      this.getApplyList();
    },
    methods:{
      // //获取用户信息
      // getUserInfo() {
      //   this.$axios.get('/sys/user/currentInfo').then(res =>{
      //     this.userInfo = res.data.data;
      //   })
      // },

      //获取当前选课状态
      getCourseStatus(){
        this.$axios.get('sys/user/switch/get').then(res => {
          console.log("状态是:",res.data.data);
          this.courseStatus = res.data.data;
        })
      },
      //获取时间列表
      getTimeList(){
        this.$axios.get("/sys/time/listAll").then(res => {
          this.timeData = res.data.data;
        })
      },
      //获取课程列表
      getCourseList(){
        this.$axios.get('/sys/user/currentInfo').then(res1 => {
          var stuId = res1.data.data.username;
          this.$axios.post('/sys/course/search',{
            username: stuId,
            statu:this.courseStatus,
          }).then(res => {
            this.courseData=this.getCourseData(res);
            // console.log("可选课程",this.courseData);
          })
        })
      },
      //获取学期信息
      getSemesterList() {
        this.$axios.get('/sys-semester/listAll').then(res =>{
          this.semesterData = res.data.data;
        })
      },
      //获取课程列表
      getApplyList(){
        this.$axios.get('/sys/user/currentInfo').then(res1 =>{
          this.userInfo = res1.data.data;
          console.log("用户信息",this.userInfo);
          this.$axios.post('sys/course/stu/applyList',{username:this.userInfo.username}).then(res => {
              console.log('applylist',res.data.data.sysCourseApps)
              // console.log('length',res.data.data.sysCourseApps.length)
              var applyData=[]
              for (var i=0 ; i <res.data.data.sysCourseApps.length;i++) {
                  var data = {}
                  data.id = res.data.data.sysCourseApps[i].id
                  data.stuName = res.data.data.sysCourseApps[i].stuName
                  data.stuId = res.data.data.sysCourseApps[i].stuId
                  data.courseId = res.data.data.sysCourseApps[i].courseId
                  data.teacherName = res.data.data.sysCourseApps[i].teacherName
                  data.reason = res.data.data.sysCourseApps[i].reason
                  if (res.data.data.sysCourseApps[i].statu === 1) {
                      data.statu = "通过"
                  }
                  else {
                      if (res.data.data.sysCourseApps[i].statu === 0) {
                          data.statu = "待审核"
                      }
                      else {
                          if (res.data.data.sysCourseApps[i].statu === 2) {
                              data.statu = "驳回"
                          }
                          else data.statu = ""
                      }
                  }
                  data.rejectReason=res.data.data.sysCourseApps[i].rejectReason

                  applyData.push(data)
                  // console.log('data',data)
              }
              this.applyData = applyData;
          })
        })
      },

      //搜索
      submitSearch(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.searchForm)
            this.$axios.post('sys/course/searchAll', this.searchForm).then(res => {
              this.courseData=this.getCourseData(res);
              console.log("搜索结果：",this.courseData);
              this.$message({
                  showClose: true,
                  message: '搜索成功',
                  type: 'success',
                  onClose: () => {
                    this.resetSearch(formName);
                  }
                });
            })
          } else {
            console.log('搜索失败!');
            return false;
          }
        });
      },
      //处理课程信息的统一方法
      //输入返回值，输出处理好的数组
      getCourseData(res){
        var dataArray=[];
        for (var i=0;i<res.data.data.length;i++) {
          var data={}
          var key;
          var mapTime=[],mapSemester=[],mapLocation=[],mapMajor=[]
          data.id = res.data.data[i].id
          for (key in res.data.data[i].semester){
            mapSemester.push(res.data.data[i].semester[key])
            mapSemester.push(',')
          }
          mapSemester.pop()
          data.semester=mapSemester
          data.courseId = res.data.data[i].courseId
          data.courseName = res.data.data[i].courseName
          data.type = (res.data.data[i].type===1)?'通选课程':'专选课程';

          data.schoolName = res.data.data[i].schoolName;
          for (key in res.data.data[i].major){
            mapMajor.push(res.data.data[i].major[key])
            mapMajor.push(',')
          }
          mapMajor.pop()
          data.major = mapMajor;
          data.credit = res.data.data[i].credit;
          data.hour = res.data.data[i].hour;
          for (var key in res.data.data[i].time){
            mapTime.push(res.data.data[i].time[key])
            mapTime.push(',')
          }
          mapTime.push()
          data.time=mapTime

          // for (var key in res.data.data[i].location){
          //     mapLocation.push(res.data.data[i].location[key])
          //     mapLocation.push(',')
          // }
          // mapLocation.pop()
          // data.location = mapLocation
          if (res.data.data[i].location!==null) {
            data.location = res.data.data[i].location.courseLocation
          }
          data.teacher = res.data.data[i].teacher;
          data.teacherId = res.data.data[i].teacherId;
          data.intro = res.data.data[i].intro;
          data.volume = res.data.data[i].volume;
          data.currentNum = res.data.data[i].currentNum;
          data.courseNum = data.currentNum + '/' + data.volume;
          dataArray.push(data);
        }
        return dataArray;
      },
      //重设表单
      resetSearch(formName){
        this.$refs[formName].resetFields();
        this.searchForm = {};
      },

      //选课申请
      courseApply(row){
        if( row.currentNum < row.volume){
          this.$message({
            showClose: true,
            message: '课程还有余量，无法提交选课申请',
            type: 'error',
          });
        }else{
          this.applyForm.courseId=row.courseId;
          this.applyForm.teacher=row.teacher;
          this.applyForm.courseName=row.courseName;
          this.applyVisible = true;
        }
      },
      submitApply(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('sys/course/stu/apply', {
              courseId:this.applyForm.courseId,
              reason:this.applyForm.reason,
              username:this.userInfo.username
            }).then(res => {
                this.resetApply(formName)
                this.$message({
                  showClose: true,
                  message: '提交选课成功',
                  type: 'success',
                  onClose: () => {
                    this.resetApply(formName);
                  }
                });
              })
          } else {
            console.log('error submit!');
            return false;
          }
        });
      },
      resetApply(formName){
        this.$refs[formName].resetFields();
        this.applyVisible = false;
        this.applyForm = {};
      },
      //分标签页用的
      handleClick(tab, event) {
        this.tabName = tab.name;
      },
    }
}
</script>

<style scoped>

</style>